<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件移入移出</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div class="wrapper" style="width:100px;height:100px ;background: red;
		margin-top:50px;margin-left:10px;">
		</div>
		<script type="text/javascript">
			var wrapper = document.getElementsByClassName("wrapper")[0];
			var box = document.getElementsByClassName("box")[0];
			/* js的旧语法 */
			// wrapper.onmouseover = function() {
			// 	console.log("移入");
			// 	wrapper.style.background = "yellow"
			// }
			// wrapper.onmouseout = function(e) {
			// 	console.log("移出");
			// 	wrapper.style.background = "orange"
			// }
			/* H5的新规范 */
			wrapper.onmouseenter = function() {
				console.log("移入");
				wrapper.style.background = "yellow"
			}
			wrapper.onmouseleave = function(e) {
				console.log("移出");
				wrapper.style.background = "orange"
			}
		</script>
	</body>
</html>
